<template>
    <div>
        <quill-editor
            class="editer"
            ref="myTextEditor"
            v-model="value"
            :options="editorOption"
            @change="onEditorChange($event)"
        ></quill-editor>
        <!-- // 文件上传组件 -->
        <el-upload
            v-show="false"
            id="quill-upload"
            action="#"
            name="upload_file"
            :limit="1"
            list-type="picture"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="onchange"
        >
            <el-button size="small" type="primary"></el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
export default {
    props: ['content'],
    data() {
        return {
            value: this.content,
            editorOption: {
                placeholder: '',
                modules: {
                    toolbar: {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote', 'code-block'],
                            [{ header: 1 }, { header: 2 }],
                            [{ list: 'ordered' }, { list: 'bullet' }],
                            [{ script: 'sub' }, { script: 'super' }],
                            [{ indent: '-1' }, { indent: '+1' }],
                            [{ direction: 'rtl' }],
                            [{ size: ['small', false, 'large', 'huge'] }],
                            [{ header: [1, 2, 3, 4, 5, 6, false] }],
                            [{ color: [] }, { background: [] }],
                            [{ font: [] }],
                            [{ align: [] }],
                            ['clean'],
                            ['image']
                        ], // 工具栏选项
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 给个点击触发Element-ui，input框选择图片文件
                                    this.fileList = [];
                                    document.querySelector('#quill-upload input').click();
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        } // 事件重写
                    }
                }
            },
            fileList: []
        };
    },
    components: {
        quillEditor
    },
    methods: {
        onchange(file, fileList) {
            this.fileList = [];
            this.imgFile = file.raw;
            console.log('🚀 ~ file: editBanner.vue ~ line 123 ~ onchange ~ file, fileList', file, fileList);
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };
            var formData = new FormData();
            formData.append('file', file.raw);
            this.$api
                .uploadFile(formData, config)
                .then(res => {
                    console.log('🚀 ~ file: editMsg.vue ~ line 178 ~ onchange ~ res', res);

                    if (res.code == '200') {
                        let quill = this.$refs.myTextEditor.quill;
                        let length = quill.getSelection().index;
                        let imgUrl = 'https://uhome.haier.net/acecology/hsadmin/static/' + res.data.path;
                        quill.insertEmbed(length, 'image', imgUrl);
                        // 调整光标到最后
                        quill.setSelection(length + 1);
                    }
                })
                .catch(err => {});
        },
        onEditorChange({ quill, html, text }) {
            //富文本编辑器内容发生改变的时候
            this.value = html;
            this.$emit('textChange', html); //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改
        }
    },
    watch: {
        content(val) {
            this.value = val;
        }
    }
};
</script>

<style scoped lang="scss">
/deep/.editer {
    .ql-container {
        height: 200px;
    }
}
</style>
